Vuex入门与使用案例 |
您所在的位置：网站首页 › vue bus和vuex › Vuex入门与使用案例 |
Vuex入门与使用案例
|
目录 一、组件之间的传值方式 1.父子组件 2.非父子组件或父子组件 3.非父子组件或父子组件 二、Vuex介绍 三、Vuex安装与配置 1.下载 2.配置 1.在src目录下创建store模块，分别维护state/actions/mutations/getters 2.在index.js中引入vue和vuex 3. 新建vuex的store实例 4.在main.js中导入并使用store实例 四、Vuex的简单使用 1.创建案例页面 2.往state.js中加入全局数据 3.调用state.js中的数据 常规方式： 推荐方式： 五、同步更新数据（mutations） 六、异步更新数据（actions） 1.静态异步 2.动态异步 1.准备后台数据 2.配置路径 3.action.js 4.给doDynamicAction添加事件 七、Vuex实现菜单栏折叠 1.定义一个全局数据 2.把这个数据加入到getter中 3.加到mutation中 4.按钮与它的点击事件 5.菜单栏的收缩 6. 让菜单栏的页面也收缩 我们在上...上篇搭建首页导航与左侧菜单栏时用的是props，this.$emit来进行组件传值的，今天我们利用vuex给他们重写一遍 一、组件之间的传值方式 1.父子组件父组件-->子组件，通过子组件的自定义属性：props 子组件-->父组件，通过自定义事件：this.$emit('事件名',参数1,参数2,...); 2.非父子组件或父子组件通过数据总数Bus，this.$root.$emit('事件名',参数1,参数2,...) 3.非父子组件或父子组件更好的方式是在vue中使用vuex 方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。 方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据 二、Vuex介绍官方解释： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），让其在各个页面上实现数据的共享包括状态，并且可操作 Vuex分成五个部分： State：单一状态树 state为单一状态树，在state中需要定义我们所需要管理的数组、对象、字符串等等，只有在这里定义了，在vue.js的组件中才能获取你定义的这个对象的状态。 Getters：状态获取 getter有点类似vue.js的计算属性，当我们需要从store的state中派生出一些状态，那么我们就需要使用getter，getter会接收state作为第一个参数，而且getter的返回值会根据它的依赖被缓存起来，只有getter中的依赖值（state中的某个需要派生状态的值）发生改变的时候才会被重新计算。 Mutations：触发同步事件 更改store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。 Actions：提交mutation，可以包含异步操作 action可以提交mutation，在action中可以执行store.commit，而且action中可以有任何的异步操作。在页面中如果我们要嗲用这个action，则需要执行store.dispatch Module：将vuex进行分模块 module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter。 三、Vuex安装与配置 1.下载 npm install vuex -S上面是默认下载vuex最新版本 需要下载指定版本只需在vuex后面加上@与版本号 例如： npm install [email protected] -S 2.配置 1.在src目录下创建store模块，分别维护state/actions/mutations/getters 分别导入其他相应模块state/actions/mutations/getters 3. 新建vuex的store实例 //在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块 const store = new Vuex.Store({ state, // 共同维护的一个状态，state里面可以是很多个全局状态 getters, // 获取数据并渲染 actions, // 数据的异步操作 mutations, // 处理数据的唯一途径，state的改变或赋值只能在这里 }) 4.在main.js中导入并使用store实例 import store from '@/store' //vuex new Vue({ el: '#app', router, store, //在main.js中导入store实例 components: { App }, template: '' }) 四、Vuex的简单使用 1.创建案例页面page1.vue: page1-{{ts}} export default{ name:'page1', data:function(){ return{ ts:new Date().getTime() } }, methods:{ }, }page2.vue: page2-{{ts}} {{yourname}} export default{ name:'page2', data:function(){ return{ ts:new Date().getTime() } }, methods:{ }, } 2.往state.js中加入全局数据 export default{ yourname:'名字', } 3.调用state.js中的数据 常规方式： //上面div中加入插值 {{yourname}} //script export default{ name:'page1', data:function(){ return{ ts:new Date().getTime() } }, methods:{ }, computed:{ yourname:function(){ //不建议 return this.$store.state.yourname; } } }效果：
按照我们常规的方法就是找到state然后拿到里面的yourname属性 这个方法没错但是不建议使用 推荐方式：在getter.js中获取数据并渲染 export default { gettername: (state) => { return state.yourname; }, }page2.vue中获取getter里面的值： page2-{{ts}} {{gettername}} export default{ name:'page2', data:function(){ return{ ts:new Date().getTime(), } }, methods:{ }, computed:{ gettername:function(){ return this.$store.getters.gettername; } }, }效果：
这种方式比上面的方法更复杂，因为它多走了一个getter,然后在获取getter里面的值， 但是还是推荐使用这种方法 五、同步更新数据（mutations）处理数据的唯一途径，state的改变或赋值只能在这里 设置mutation.js数据 export default { // mutations:处理数据的唯一途径，state的改变或赋值只能在这里 // type(事件类型)： 其值为setterName // state:数据状态的定义 // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器 传递json对象 setterName: (state, payload) => { state.yourname = payload.name; }, }给页面加个按钮 Mutations同步方法 Actions异步方法 Actions动态异步方法给doMutations添加事件： methods:{ doMutations:function(){ //错误方式： /* this.$store.mutations.setterName({ name:'XXX' }); */ //正确方式 this.$store.commit('setterName',{ name:'海害嗨', }); }, },效果：
定义actions.js: export default { //action:是异步数据的更改方式，本质上还是mutation来更改数据 //payload:用于承载数据的容器，就是json //comtext:上下文 setyourNameStatic: function(context, payload) { setTimeout(() => { context.commit('setterName', payload); //Action提交的是mutation }, 3000); }, }给doStaticAction定义事件： methods:{ doMutations:function(){ //错误方式： /* this.$store.mutations.setterName({ name:'XXX' }); */ //正确方式 this.$store.commit('setterName',{ name:'海害嗨', }); }, doStaticAction:function(){ this.$store.dispatch('setyourNameStatic',{ name:'来了宝贝' }); }, },效果： 点击按钮等三秒就出现了 因为在action.js中不能使用this,所以我们把this作为参数传到action.js中 效果：
菜单栏的折叠是通过ture与false控制的 2.把这个数据加入到getter中 export default { gettername: (state) => { return state.yourname; }, getcollapsed:(state)=>{ return state.collapsed; } }为了在组件中获取到state里面的数据 3.加到mutation中 export default { // mutations:处理数据的唯一途径，state的改变或赋值只能在这里 // type(事件类型)： 其值为setterName // state:数据状态的定义 // payload：官方给它还取了一个高大上的名字：载荷，其实就是一个保存要传递参数的容器 传递json对象 setterName: (state, payload) => { state.yourname = payload.name; }, setcollapsed:(state)=>{ state.collapsed=!state.collapsed; } }在点击收缩按钮的同时要把数据也改变 4.按钮与它的点击事件按钮： 首页导航(TopNav.vue)中点击按钮的同时使用三元运算符改变图片 //定义一个有图片的按钮
获取全局数据与按钮的单击事件： 在Mian.vue中获取全局数据控制菜单栏的收缩 // 导入组件 import TopNav from '@/components/TopNav.vue' import LeftAside from '@/components/LeftAside.vue' // 导出模块 export default { name:'Main', data:function(){ return{ /* collapsed:false */ } }, components:{ TopNav, LeftAside }, computed:{ dcollapsed:function(){ return this.$store.getters.getcollapsed; } }, }; .main-container { height: 100%; width: 100%; box-sizing: border-box; } .main-aside-collapsed { /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */ width: 64px !important; height: 100%; background-color: #334157; margin: 0px; } .main-aside { width: 240px !important; height: 100%; background-color: #334157; margin: 0px; } .main-header, .main-center { padding: 0px; border-left: 2px solid #333; } /* 加过渡给侧边导航*/ .el-aside { transition: width 0.25s; -webkit-transition: width 0.25s; -moz-transition: width 0.25s; -webkit-transition: width 0.25s; -o-transition: width 0.25s; } /*加快侧边栏文字消失的速度*/ .el-menu { transition: all 10ms; }但是我们发现一个问题： 他好像收缩了又好像没缩
找到左侧菜单栏页面LeftAside.vue 然后获取数据改变中的collapse属性让他实现真的收缩 
Page1
Page2
{{root.text}}
{{node.text}}
export default {
name:'LeftAside',
data:function(){
return{
treenode:[],
}
},
methods:{
},
created:function(){
//定义请求路径
let url=this.axios.urls.INIT_MENU;
//发起Ajax请求
this.axios.get(url,{
params:{methodName:'queryTreeNode'}
}).then(resp=>{
let data=resp.data.data;
console.log(data);
this.treenode=data;
}).catch(err=>{
console.log(err);
});
},
computed:{
dcollapsed:function(){
return this.$store.getters.getcollapsed;
}
},
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 240px;
min-height: 400px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
border: none;
text-align: left;
}
.el-menu-item-group__title {
padding: 0px;
}
.el-menu-bg {
background-color: #1f2d3d !important;
}
.el-menu {
border: none;
}
.logobox {
height: 40px;
line-height: 40px;
color: #9d9d9d;
font-size: 20px;
text-align: center;
padding: 20px 0px;
}
.logoimg {
height: 40px;
}
博主水平有限，难免有错。欢迎评论交流 |
【本文地址】